/*
 * Copyright (c) 2012 The Chromium OS Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

/**
 * Utility css to make box layout easier to specify.
 *
 * Treats <x-hbox>...</x-hbox> and <x-vbox>...</x-vbox> as horizontal and
 * vertical boxes.  Also allows <sometag x-vbox> attributes, for times when
 * some specific tag behavior is important.
 */

*[x-box] {
  display: -webkit-flex;
  -webkit-flex: 0 0 auto;
}

x-vbox, *[x-vbox] {
  display: -webkit-flex;
  -webkit-flex-direction: column;
  -webkit-flex: 0 0 auto;
}

x-hbox, *[x-hbox] {
  display: -webkit-flex;
  -webkit-flex-direction: row;
  -webkit-flex: 0 0 auto;
}

*[x-flex="1"] { -webkit-flex: 1 0% }
*[x-flex="2"] { -webkit-flex: 2 0% }
*[x-flex="3"] { -webkit-flex: 3 0% }
*[x-flex="4"] { -webkit-flex: 4 0% }

*[x-pack="center"] { -webkit-justify-content: flex-center }
*[x-pack="start"] { -webkit-justify-content: flex-start }
*[x-pack="end"] { -webkit-justify-content: flex-end }

*[x-align="center"] { -webkit-align-items: center }
*[x-align="baseline"] { -webkit-align-items: baseline }
